<template>
    <div>
        <mt-header class="plain" title="考勤历史" fixed >
            <mt-button slot="left" @click="goBack" icon="back">返回</mt-button>
        </mt-header>
        
        <div class="info-block-list text-left">
            <div class="info-block">

                <mt-loadmore ref="loadMore" :auto-fill="false" :top-method="refresh" :bottom-method="loadMore" :bottom-all-loaded="allLoaded">
                    <div class="info-list">
                        <div class="info-item" v-for="(item, index) in data.items" :key="index">
                            <span class="text">{{item.address}}</span>
                            <span class="time color-gray ml-2">{{item.signintime}}</span>
                        </div>
                    </div>
                </mt-loadmore>
            </div>
        </div>

    </div>
</template>

<script>
import { Toast } from 'mint-ui'
import { Const } from '@/consts'
import schoolApi from '@/api/school'
import utils from '@/utils'

export default {
    data() {
        return {
            allLoaded: false,

            data: {
                items: []
            },

            pageNo: 0,
            pageSize: 5,
            courseId: ''
        }
    },


    mounted() {

        let course = utils.get('USER_COURSE') || {}
        this.courseId = this.$route.query.courseId || course.courseid || ''

        this.refresh()
        // this.data.items = [{
        //     address: '潍坊市奎文区健康西街1245号',
        //     signintime: '2018-04-27 06:11:01'
        // }, {
        //     address: '潍坊市奎文区健康西街1245号',
        //     signintime: '2018-04-27 06:11:01'
        // }, {
        //     address: '潍坊市奎文区健康西街1245号',
        //     signintime: '2018-04-27 06:11:01'
        // }, {
        //     address: '潍坊市奎文区健康西街1245号',
        //     signintime: '2018-04-27 06:11:01'
        // }]
    },

    methods: {
        
        refresh() {
            this.data.items = [];
            this.allLoaded = false;
            this.pageNo = 0;
            this.pageSize = 30;
            this.loadMore(true);
            this.$refs.loadMore.onTopLoaded();
            this.pageSize = 5;
            
        },


        loadMore(onlyOnce) {
            
            schoolApi.getSignHistory({
                params: {
                    // courseid: this.courseId,
                    pageno: this.pageNo++,
                    pagesize: this.pageSize
                }
            }).then((resp) => {
                const result = resp[Const.RESP_RESULT] || [];

                if (!result || !result[0]) {
                    this.allLoaded = true;
                } else {
                    this.data.items.push(...result)
                }
                if (!onlyOnce) {
                    this.$refs.loadMore.onBottomLoaded();
                }
            }).catch((resp) => {
                if (resp.statusCode == '200') {
                    Toast(resp[Const.RESP_MESSAGE] || '获取信息失败');
                }
            });
        },

        goBack() {
            this.$router.replace({path: '/personal/school/punchcard'});
        },

        handleBottomChange(status) {
            // console.log(status)
        }
    }
}
</script>

<style lang="scss" scoped>

$offset-x: 16px;
$scale: 1.2;

.info-block-list {
    border-top: 1px solid #dddddd;
    margin-top: 55px;
    margin-left: $offset-x;
    margin-right: $offset-x;
    .info-block {
        // border-bottom: 1px solid #d2d2d2;
        // .info-block-type {
        //     font-size: 18px * $scale;
        // }
        margin-top: 8px;
        .info-list {
            padding-bottom: 20px;
            .info-item {
                font-size: 14px * $scale;
                line-height: 19px;
                padding: 12px 0;
                border-bottom: 1px solid #dddddd;
                height: 48px;
                position: relative;
                
                .text {
                    color: #333333;
                    font-size: 14px;
                }
                
                .time {
                    position: absolute;
                    right: 0;
                    font-size: 10px * $scale;
                }
            }

            .info-item:last-child {
                border-bottom: none;
            }
        }
    }

    // .info-block:last-child {
    //     border-bottom: none;
    // }
}
</style>
